<script setup>
import { PlusOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons-vue'
import { getOptions } from '@/utils'
import { ref } from 'vue'

const emits = defineEmits(['add', 'init', 'search'])
// 新增按钮点击
const add = () => {
  emits('add')
}
// 刷新
const orderNo = ref('')
const productName = ref('')
const status = ref(null)
const outBigTypeId = ref(null)
const outSmallTypeId = ref(null)
const init = () => {
  orderNo.value = ''
  productName.value = ''
  status.value = null
  outBigTypeId.value = null
  outSmallTypeId.value = null
  emits('init')
}
// 搜索
const search = () => {
  emits('search', {
    orderNo: orderNo.value,
    productName: productName.value,
    status: status.value,
    outBigTypeId: outBigTypeId.value,
    outSmallTypeId: outSmallTypeId.value
  })
}
</script>

<template>
  <div class="head">
    <AButton type="primary" @click="add"> <PlusOutlined /> 新增 </AButton>
    <div class="right">
      <a-input
        @input="search"
        v-model:value="orderNo"
        placeholder="请输入采购单号查询"
        class="com-ipt"
        allowClear
      >
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-input
        @input="search"
        v-model:value="productName"
        placeholder="请输入物资名称查询"
        class="com-ipt"
        allowClear
      >
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-select
        @change="search"
        class="com-ipt"
        placeholder="筛选采购状态"
        v-model:value="status"
        :options="[
          { label: '已拒绝', value: 0 },
          { label: '待审核', value: 1 },
          { label: '已通过', value: 2 },
          { label: '采购中', value: 3 },
          { label: '已到货', value: 4 },
          { label: '已入库', value: 5 },
          { label: '已驳回', value: 6 }
        ]"
        allowClear
      />
      <AButton type="primary" @click="search"> <SearchOutlined /> 搜索 </AButton>
      <AButton type="primary" @click="init"> <RedoOutlined /> 刷新 </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 8px;
  justify-content: space-between;

  .right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
</style>